<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
           <div class="sn-quick-menu">
              <div class="login"><img v-if="info.logo" :src="info.logo.path" alt="">{{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i></div>
              <!-- <div class="sp-cart">客服服务<i class="el-icon-arrow-down"></i></div> -->
            </div>
        </div>
      </div>
    </div>

     <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`" title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action="" class="layui-form" novalidate>
              <input type="text" v-model="keyword"  class="layui-input" placeholder="搜索关键字">
              <button class="layui-btn" @click="filterPops()">
                  <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">


      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types" style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/orderlist`">我的订单</router-link>
              <router-link :to="`/nowadderss`">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>

      
      <div class="commod-cont-wrap">
        <section class="wrap w1200 shop_header">
          <div class="shop_logo"><img :src="storeInfo.store_logo"/></div>
          <div class="shop_infor">
            <h2 class="user_vip accredited" title="认证企业">{{storeInfo.store_name}}</h2>
            <p>
            <span>联系电话：{{storeInfo.mobile}}</span>
            <span>营业时间：{{storeInfo.business_start}}~{{storeInfo.business_end}}</span>
            </p>
            <p>地址：{{storeInfo.address}}</p>
          </div>
        </section>
      <div class="commod-cont w1200 layui-clear">
        <div class="left-nav">
          <div class="title">所有分类</div>
          <div class="list-box">
            <ul>
             <li :class="{'active': item.cate_id == navId}" v-for="(item,index) in navList" :key="index" @click="toggleNav(item.cate_id, item.cate_name)"><i class="el-icon-caret-right"></i>{{item.cate_name}}<i class="el-icon-arrow-right"></i></li>
            </ul>
          </div>
        </div>
        <div class="right-cont-wrap">
          <div class="right-cont">
            <!-- <div class="sort layui-clear">
              <a class="active" href="javascript:;" event = 'volume'>销量</a>
              <a href="javascript:;" event = 'price'>价格</a>
              <a href="javascript:;" event = 'newprod'>新品</a>
              <a href="javascript:;" event = 'collection'>收藏</a>
            </div> -->
            <div class="prod-number">
              <span>{{goodsName + '(' + total + ')'}}</span>
            </div>
            <div class="cont-list layui-clear" id="list-cont">
              <div class="item" v-for="(item,index) in goodsList" :key="index" @click="todeatil(item.product_id)">
                <div class="img">
                  <router-link :to="{path:'/shopdeatil',query: {product_id: item.product_id}}"><img :src="item.main_imgurl"></router-link>
                </div>
               <div class="text">
                  <p class="title">{{item.product_title}}</p>
                  <p class="price" v-if="item.cost_price">
                    <span><i>底价 ￥</i>{{item.cost_price}}</span>
                  </p>
                  <p class="price">
                    <del><i>售价 ￥</i>{{item.price}}</del><del style="padding-left:10px;"><i>原价 ￥</i>{{item.primary_price}}</del>
                  </p>
                </div>
              </div>
              
            </div>
           
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pagesize"
            layout="sizes, prev, pager, next"
            :total="total">
          </el-pagination>

          </div>
        </div>
      </div>
    </div>
    </div>

  
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
      <p class="coty">融易装版权所有 &copy; 2012-2020</p>
    </div>
  </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '小刀',
        info: {},
        mobile: '',
        id:'',
        // 精选品牌
        brandList: [],
        currentPage: 1,
        pagesize:20,
        total:1,
        storeInfo:'',
        // 商品分类数据
        navId: null,       // 当前所选中分类
        navList: null,
        // 商品数据
        goodsName: null,
        goodsList: null,
        keyword:'',
      }
    },
     mounted() {
            this.info = JSON.parse(localStorage.getItem('info'))
            this.mobile = localStorage.getItem('mobile')
            this.id = this.$route.query.id
            this.getDatashop()
            this.getGoodsNav()
        },
    methods: {
       todeatil(product_id){
        this.$router.push({name:'shopdeatil',query:{product_id:product_id}})
      },
      // 获取商家信息
      getDatashop() {
        this.$http.post('/api/admin/shopweb/store/detail',{store_id:this.id}).then(res=>{
					if(res.code==1){
						 this.storeInfo = res.data
					}
				})
      },
      // 获取商品数据
      getGoods(navId, navName, callback) {
        this.$http.post('/api/admin/shopweb/store/product',{store_id:this.id,cate_id: this.navId, page:this.currentPage,pagesize:this.pagesize,keyword:this.keyword}).then(res=>{
					if(res.code==1){
						 let goodsList = res.data.data
						
						// 处理数据
						goodsList.forEach(val => { 
							val.num = 0 
							val.volume = val.volume ? val.volume : 0
						})
						
						this.goodsName = navName
						this.goodsList = goodsList
						this.total = res.data.count
					}
				})
      },
      // 获取商品分类
      getGoodsNav() {
        this.$http.post('/api/admin/shopweb/store/cate',{store_id:this.id}).then(res=>{
					if(res.code==1){
						 let navList = res.data
						let firstId = navList[0].cate_id
						let firstName = navList[0].cate_name
						
						this.navList = navList
						this.navId = firstId
						this.getGoods(firstId, firstName)
					}
				})
      },
      // 切换商品分类
		toggleNav(navId, navName) {
			this.page = 1
			if (this.navId != navId) {
				this.navId = navId
				this.getGoods(navId, navName, () => {
					let cartList = this.cart.list
					let goodsList = this.goodsList
					
					for (let i = 0; i < cartList.length; i++) {
						for (let j = 0; j < goodsList.length; j++) {
							if (cartList[i].product_id == goodsList[j].product_id) {
								goodsList[j].num++
							}
						}
					}
				})
			}
		},
      handleSizeChange(val) {
        this.pagesize = val
        this.currentPage = 1
        this.getGoods()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getGoods()
      },
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content{
    padding: 0 !important;
  }
  @import '../css/index.less';
</style>
